<template>
  <div>
    <header>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index/admin' }">
          <span class="tits"> admin</span></el-breadcrumb-item
        >
      </el-breadcrumb>
      <div>
        <el-button type="success" class="creatBtn">Creat Account</el-button>
      </div>
    </header>

    <div class="table-area">
      <el-row class="filter-area">
        <el-col :span="6">
          User Role:
          <el-select
            v-model="roleId"
            class="m-2"
            placeholder="Select"
            @change="roleChangeHandle()"
          >
            <el-option
              v-for="item in RoleOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col :span="6">
          Status:

          <el-select v-model="status" class="m-2" placeholder="Select"
             @change="statusChangeHandle()"
          >
            <el-option
              v-for="item in statusSelect"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col :span="8">
          Name / Mobile / Email:
          <el-input
            v-model="key"
            placeholder=""
            :suffix-icon="Search"
            style="width: 260px"
          >
          </el-input>
        </el-col>
      </el-row>

      <!-- 可展开的表格 -->
      <el-table :data="tableData" height="62vh" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <div m="4">
              <p m="t-0 b-2">State: {{ props.row.state }}</p>
              <p m="t-0 b-2">City: {{ props.row.city }}</p>
              <p m="t-0 b-2">Address: {{ props.row.address }}</p>
              <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="id" />
        <el-table-column label="Name" prop="name" />
        <el-table-column label="Email" prop="name" />
        <el-table-column label="User Role" prop="name" />
        <el-table-column label="Created Date" prop="name" />
        <el-table-column label="Status" prop="name" />

        <el-table-column label="Action">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              Action Type<el-icon class="el-icon--right"
                ><arrow-down
              /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="a">Edit</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
export default {
  components: {
    Search,
    ArrowDown,
  },
  setup() {
    const state = reactive({
      roleId: "",
      status: "",
      key: "",
      // ROLE_MMS_ADMIN  mms的 时候 remarks为ROLE_MMS_ADMIN
      remarks: "ROLE_ADMIN",
      // 角色下拉
      RoleOptions: [
        {
          name: "Super Admin",
          value: "ROLE_ADMIN",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "Operator",
          value: "ROLE_CARPARK_OPERATOR",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "Carpark Owner",
          value: "ROLE_CARPARK_OWNER",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "Controller",
          value: "ROLE_CONTROLLER",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "Cashier",
          value: "ROLE_CASHIER",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "Enforcer",
          value: "ROLE_ENFORCEMENT",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "ThirdParty",
          value: "ROLE_THIRD_PARTY",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "User",
          value: "ROLE_USER",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "Auditor",
          value: "ROLE_AUDITOR",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "Tester",
          value: "ROLE_TESTER",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "Ticket Admin",
          value: "ROLE_TICKET_ADMIN",
          remarks: "ROLE_ADMIN",
        },
        {
          name: "Ticket Organizer",
          value: "ROLE_TICKET_ORGANIZER",
          remarks: "ROLE_ADMIN",
        },
      ],
      // 状态下拉
      statusSelect: [
        { name: "Active", value: "active" },
        { name: "Deactive", value: "deactive" },
      ],

      tableData: [
        {
          id: 1,
          date: "2016-05-03",
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
          zip: "CA 90036",
          action: "...",
        },
      ],
      currentPage4: 1,
      pageSize4: 10,
    });

    // action下拉触发的行为
    const handleCommand = (command) => {
      ElMessage(`click on item ${command}`);
    };

    //  角色筛选的效果
    const roleChangeHandle = () => {
      console.log(state.roleId, "选中的role");
    };

  const statusChangeHandle = () => {
      console.log(state.status, "选中的状态");
    };

    // 分页相关的事件
    const handleSizeChange = (val) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`);
    };
    return {
      ...toRefs(state),
      Search,
      ElMessage,
      ArrowDown,
      handleCommand,
      handleSizeChange,
      handleCurrentChange,
      roleChangeHandle,
      statusChangeHandle
    };
  },
};
</script>

<style lang="scss" scoped>
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  font-weight: 600;
  color: #00bdb5;
  .el-button {
    background: #00bdb5;
  }
  .tits {
    color: #00bdb5;
    font-weight: 600;
    font-size: 20px;
  }
  .creatBtn {
    height: 40px;
  }
}
.table-area {
  height: 75vh;
  background: #feffff;
  padding-top: 16px;
  box-sizing: border-box;
  //搜索框区域
  .filter-area {
    box-sizing: border-box;
    padding-left: 16px;
    .el-select {
      height: 40px;
    }

    ::v-deep .el-input__inner {
      height: 40px;
    }
  }

  //表格区域
  .el-table {
    margin-top: 16px;

    .el-collapse-item {
      box-sizing: border-box;
      padding-left: 16px;
      padding-right: 16px;
    }

    .el-table__cell p {
      box-sizing: border-box;
      padding: 0 60px;
    }
  }
  //B表格标题
  ::v-deep .el-table th.el-table__cell > .cell {
    font-weight: 600;
    color: black;
  }
  .el-pagination {
    box-sizing: border-box;
    padding: 0 16px;
    display: flex;
    padding-top: 6px;
  }
}
</style>